<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/expand/eleTree/eleTree/eleTree.css" media="all">

</head>
<body>


    <div class="layui-col-md12"  >

    <form class="layui-form layui-from-pane" action="" style="margin-top:20px"   >
        <div class="layui-inline">
            <label class="layui-form-label">权限类型</label>
            <div class="layui-input-block">
                <select id="search_type"  >
                    <option value="">请选择</option>
                    <option value="1">菜单</option>
                    <option value="2">权限</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" >
            <div class="layui-input-block">
                <button type="button" id="searchperm" class="layui-btn layui-btn-primary  layui-btn-sm layui-btn-submit " lay-submit="" lay-filter="searchperm">
                    <i class="layui-icon">&#xe615;</i>
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe669;</i>
                </button>
            </div>
        </div>
    </form>

    </div>
    <div >
        <table class="layui-table" id="demo" lay-filter="test"></table>
    </div>

    <div  id="roleTree">
        <div  class="eleTree roleTree" lay-filter="role_tree_data"></div>
    </div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



<script type="text/html" id="toolTableTop">
    <div class="layui-btn-container">
        <button  type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button  type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="batchDeleted">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </div>
</script>

<script src="../../static/layui/layui.js" charset="utf-8"></script>
    <!--<script src="../static/expand/eleTree/layui/lay/mymodules/eleTree.js" charset="utf-8"></script>-->
<script type="text/javascript"  th:inline="none">
    layui.config({
        base: "../static/expand/eleTree/layui/lay/mymodules/"        //eleTree.js所在目录
    }).use([ 'layer', 'table','element', 'form','jquery','eleTree'], function(){

        var layer = layui.layer //弹层
            ,table = layui.table //表格
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
            ,$ = layui.jquery
            ,eleTree = layui.eleTree
            ,form = layui.form;
        var nowIndex;
        var countOpen=parseInt(0);

        //执行一个 table 实例
                var tableInfo = table.render({
            elem: '#demo', //选取html表格的id
            id: 'permId',
            response: {
                // statusName: 'status', //规定数据状态的字段名称，默认：code
                statusCode: '200 ' //规定成功的状态码，默认：0
                // ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
                // ,countName: 'total' //规定数据总数的字段名称，默认：count
                // ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            ,url: '/system/permission'
            ,title: '权限表'
            ,toolbar: '#toolTableTop'
            ,page: true
            ,cols: [[
                 {type: 'checkbox', fixed: 'left'}
                ,{field: 'permissionId', title: 'ID', align:'center',sort: true, fixed: 'left'}
                ,{field: 'title', align:'center',title: '权限名称'}
                ,{field: 'type', align:'center',title: '权限类型',templet: function (row){
                                var type = row.type;
                                if (type===1){
                                    return "菜单"
                                } else if (type===2) {
                                    return "权限"
                                }else {
                                    return ""
                                }
                            }}
                // ,{field: 'parent_id', align:'center',title: ' '}
                // ,{field: 'sortNumber', align:'center',title: '排序号'}
                , {
                        field: 'icon', align: 'center', title: '菜单图标', templet: function (row) {
                        return "<i class=\"layui-icon\">"+row.icon+"</i>";
                    }
                }
                ,{field: 'hrefMethod', align:'center',title: '请求方法'}
                ,{field: 'href', align:'center',title: 'url地址'}
                // ,{field: 'spread', align:'center',title: '菜单是否展开'}
                ,{field: 'code', align:'center',title: '权限代码'}
                // ,{field: 'enable', align:'center',title: '是否可见'}
                ,{fixed: 'right', title: '操作',width: 165, align:'center', toolbar: '#barDemo'}
            ]]
        });
        //监听头工具条事件 toobar是头工具条
        table.on('toolbar(test)', function(obj){

            var checkStatus = table.checkStatus("permId") //获取选中行
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    nowIndex = layer.open(  //弹出层
                        {
                            type: 1,
                            title: '添加权限页面',

                            area: ['700px', '400px'],
                            btnAlign: 'c',//按钮居中对齐
                            content: $("#add_form"), //选择表单的html Id
                            anim: 5,//弹出效果 渐显
                            success:function(index){
                                $.ajax({
                                    url: '/system/permission/getParentNode',
                                    dataType: 'json',
                                    type: 'GET',
                                    success: function (resp) {
                                        if (resp.code===200){
                                            var data = resp.data;
                                            $('#parent_id').html('');
                                            $('#parent_id').append("<option value='0'>请选择</option>");// 下拉菜单里添加元
                                            $.each(data, function (index, val) {
                                                $('#parent_id').append("<option value="+val.permissionId+">"+val.title+"</option>");// 下拉菜单里添加元素
                                            });
                                            layui.form.render("select");
                                        }else {
                                            $('#parent_id').html('');
                                            $('#parent_id').append("<option value=''>请选择</option>");// 下拉菜单里添加元
                                        }

                                    }
                                });
                            }

                        });
                    form.on('radio(add_type)', function(data){


                        console.log(data.value);
                        if(data.value === "1"){ //2权限
                            $("#add_code").hide();
                            $("#add_meun").show();
                        }else{
                            $("#add_code").show();
                            $("#add_meun").hide();
                        }

                        form.render();
                    });
                    form.on('submit(add_submitTable)', function(data) {//REST风格 function(data) 因为submit监听了submitTable表单，data代表的是表单中的整体对象
                        if(data.field.enable === "on") {
                            data.field.enable = "1";
                        } else {
                            data.field.enable = "0";
                        }

                        if(data.field.spread === "on") {
                            data.field.spread = "1";
                        } else {
                            data.field.spread = "0";
                        }



                        $.ajax({
                            type: "POST",
                            contentType:"application/json",//设置请求参数类型为json字符串
                            url: "/system/permission",
                            data: JSON.stringify({
                                title: data.field.title,        //这里的data.field 的 title 对应的是html的id
                                type: data.field.type,
                                parentId: data.field.parent_id,
                                sortNumber: data.field.sort_number,
                                icon: data.field.icon,
                                hrefMethod: data.field.href_method,
                                href: data.field.href,
                                spread:data.field.spread,
                                code: data.field.code,
                                enable: data.field.enable
                            }),
                            success:function(resp){
                                var code = resp.code;
                                if (code === 200 ){

                                    $("#add_perm")[0].reset();  //添加清空表格用法
                                    layui.form.render();
                                    layer.close(nowIndex);

                                    layer.msg('添加成功', {icon: 1});
                                    tableInfo.reload();
                                }else {
                                    layui.form.render();
                                    layer.msg("添加失败"+ " "+ resp.msg, {icon: 5});
                                }
                            }
                        });

                        return false;
                    });

                    break;
                case 'batchDeleted':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('是否确定删除选中的数据',
                            {
                                icon:0,
                                title: "提示",
                                skin: "deleteTips"
                            }
                            , function(){

                            var keyArr = '';
                            $.each(data,function (index, val) { //index是数组对象索引，val是对象
                               if (index===0){
                                   keyArr = keyArr + val.permissionId;
                               }else {
                                   keyArr = keyArr +','+ val.permissionId;
                               }
                            });

                            console.log(keyArr);
                            $.ajax({
                                type: "POST",
                                contentType:"application/x-www-form-urlencoded",//设置请求参数类型为json字符串
                                url: "/system/permissionByBatchDelete",
                                data:{
                                    ids: keyArr
                                },
                                success:function(resp){
                                    var code = resp.code;
                                    if (code === 200 ){
                                        layer.close(nowIndex);
                                        layer.msg('删除成功', {icon: 1});
                                        tableInfo.reload();
                                    }else {
                                        layer.msg("删除失败", {icon: 5});
                                    }
                                }
                            });


                        });
                    }
                    break;


                case 'button-test':


                    var data=[{name: '张三',description: 'no thing'},{name: '张三1',description: 'no thing1'},{name: '张三3',description: 'no thing'}];
                    var test= [];
                    for (var i = 0; i < data.length; i++) {
                        var obj = {
                            name: data[i].name,
                            description: data[i].description
                        };
                        test.push(obj);
                        console.info(obj);
                    }
                    console.info(test);

                    $.ajax({
                        type: "POST",
                        contentType:"application/json",//设置请求参数类型为json字符串
                        url: "/system/permission/test",
                        // data: $.toJSON({listData: demo}),
                        data: JSON.stringify(data),
                        success:function(resp){
                            var code = resp.code;
                            if (code === 200 ){

                                layer.close(nowIndex);

                                layer.msg('添加成功', {icon: 1});
                                tableInfo.reload();
                            }else {
                                layui.form.render();
                                layer.msg("添加失败"+ " "+ resp.msg, {icon: 5});
                            }
                        }
                    });
                case 'button-eleTree':  //树形
                    nowIndex = layer.open(
                        {
                            type: 1,
                            title: '角色权限分配',

                            // shade: 0.8,
                            area: ['880px', '550px'],
                            btnAlign: 'c',//按钮居中对齐
                            content: $("#roleTree"), //选择表单的html Id
                            anim: 5,//弹出效果 渐显
                            success:function(index){
                                var el4=eleTree.render({
                                    elem: '.roleTree',
                                    data: [
                                        {
                                            "id": 1,
                                            "label": "安徽省"
                                        },
                                        {
                                            "id": 11,
                                            "label": "江苏省"
                                        }
                                    ],
                                    showCheckbox: true,
                                    lazy: true,
                                    load: function(data,callback) {
                                        console.log(data);
                                        var newData;
                                        switch (data.id) {
                                            case 1:
                                                newData=[
                                                    {
                                                        "id": 2,
                                                        "label": "马鞍山市",
                                                        "checked": true
                                                    }
                                                ]
                                                break;
                                            case 2:
                                                newData=[
                                                    {
                                                        "id": 3,
                                                        "label": "和县",
                                                        "isLeaf": true
                                                    }
                                                ]
                                                break;
                                            case 11:
                                                newData=[
                                                    {
                                                        "id": 12,
                                                        "label": "苏州市",
                                                        "disabled": true,
                                                        "isLeaf": true
                                                    }
                                                ]
                                                break;

                                            default:
                                                break;
                                        }
                                        setTimeout(function() {
                                            callback(newData);
                                        },500);

                                    }
                                });
                            }

                        });

            }
        });

        //监听行工具事件   tool是行工具条
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，demo 是 table 原始容器的属性 lay-filter="对应的值"

            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                nowIndex = layer.open(
                    {
                        type: 1,
                        title: '详情页面',

                        // shade: 0.8,
                        area: ['880px', '550px'],
                        btnAlign: 'c',//按钮居中对齐
                        content: $("#detail_form"), //选择表单的html Id
                        anim: 5,//弹出效果 渐显
                        success:function(index){

                        }

                    });

            } else if(layEvent === 'del'){

                layer.confirm('真的删除行么', function(index){

                    var id = data.userid;
                    $.ajax({
                        type: "DELETE",
                        contentType:"application/json",//设置请求参数类型为json字符串
                        url: "/system/user" + data.userid  ,
                        success:function(resp){
                            var code = resp.code;
                            if (code === 200 ){
                                layer.close(nowIndex);
                                layer.msg('删除成功', {icon: 1});
                                tableInfo.reload();
                            }else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
            else if(layEvent === 'edit'){
                var id = data.permissionId;
                nowIndex = layer.open(  //弹出层
                    {
                        type: 1,
                        title: '编辑页面',

                        // shade: 0.8,
                        area: ['700px', '400px'],
                        btnAlign: 'c',//按钮居中对齐
                        content: $("#edit_form"), //选择表单的html Id
                        anim: 5,//弹出效果 渐显

                        success:function(index){

                            $('#edit_parent_id').empty();
                            $.ajax({
                                url: '/system/permission/getParentNode',
                                dataType: 'json',
                                type: 'GET',
                                success: function (resp) {
                                    //one 推荐
                                    if (resp.code===200){
                                        var v = resp.data;
                                        $('#edit_parent_id').html('');
                                        var  html =  '<option value ="0">请选择</option>';
                                        $.each(v, function (index, val) {
                                            html += `<option value ="${val.permissionId}">${val.title}</option>`;
                                        });
                                        $("#edit_parent_id").html(html);
                                        if (data.parentId !=undefined){
                                            $("#edit_parent_id").val(data.parentId);
                                        }

                                        layui.form.render();
                                    }else {
                                        $("#edit_parent_id").html(``);
                                        layui.form.render("select");
                                        layui.form.render();
                                    }

                                    // two

                                    // if (resp.code===200){
                                    //     var v = resp.data;
                                    //     $('#edit_parent_id').html('');
                                    //     $.each(v, function (index, val) {
                                    //
                                    //         if (data.parentId===val.permissionId) {
                                    //             $('#edit_parent_id').append("<option value="+val.permissionId+" selected>"+val.title+"</option>");// 下拉菜单里添加元素
                                    //         }else {
                                    //             $('#edit_parent_id').append("<option value="+val.permissionId+">"+val.title+"</option>");// 下拉菜单里添加元素
                                    //         }
                                    //         if (data.parentId==="0"&&index===1) {
                                    //             $('#edit_parent_id').append("<option value="+"0"+" selected>"+"请选择"+"</option>");
                                    //         }
                                    //
                                    //     });
                                    //
                                    //
                                    //     layui.form.render();
                                    // }
                                    // else {
                                    //     $('#edit_parent_id').html('');
                                    //     $('#edit_parent_id').append("<option value='0'>请选择</option>");// 下拉菜单里添加元
                                    //     layui.form.render();
                                    // }

                                }
                            });



                            //
                            // $('#href_method').val(data.hrefMethod);
                            layui.form.render("select");

                            form.val("dataForm",{    //form.val('filter', object); 表单赋值和取值，这里赋值；
                                "id" : data.id, //表格赋值操作 k为表单中的name ,v为渲染表格字段
                                "title": data.title,
                                "type": data.type,
                                "parent_id": data.parentId,
                                "sort_number" : data.sortNumber,
                                "href_method" : data.hrefMethod,
                                "icon": data.icon,
                                "href": data.href,
                                "spread":data.spread,
                                "code": data.code,
                                "enable" : data.enable
                            });

                        }

                    });
                form.on('select(role)', function(data){
                        // data.value
                });
                form.on('submit(submitTable)', function(data) {//REST风格 function(data) 因为submit监听了submitTable表单，data代表的是表单中的整体对象
                    if(data.field.enable === "on") {
                        data.field.enable = "1";
                    } else {
                        data.field.enable = "0";
                    }
                    if(data.field.spread === "on") {
                        data.field.spread = "1";
                    } else {
                        data.field.spread = "0";
                    }
                    console.log(data);
                    $.ajax({
                        type: "PUT",
                        contentType:"application/json",//设置请求参数类型为json字符串
                        url: "/system/permission/"+id,
                        data: JSON.stringify({
                            title: data.field.title,
                            type: data.field.type,
                            parentId: data.field.parent_id,
                            sortNumber: data.field.sort_number,
                            icon: data.field.icon,
                            hrefMethod: data.field.href_method,
                            href: data.field.href,
                            spread:data.field.spread,
                            code: data.field.code,
                            enable: data.field.enable
                        }),
                        success:function(resp){
                            var code = resp.code;
                            if (code === 200 ){
                                layer.close(nowIndex);
                                layer.msg('修改成功', {icon: 1});
                                tableInfo.reload();
                            }else {
                                layer.msg("修改失败", {icon: 5});
                            }
                        }
                    });
                    return false;
                })

            }
        });



        $("#searchperm").click(function () {
            {

                var searchType = $("#search_type").val();

                layui.table.reload("permId",{
                    where:{
                        type: searchType
                    }

                })
            }
        });

        eleTree.on("nodeClick(role_tree_data)",function(d) {
            console.log(d.data);    // 点击节点对于的数据
            console.log(d.event);   // event对象
            console.log(d.node);    // 点击的dom节点
            console.log(this);      // 与d.node相同
        })



    });
</script>
<!--// 添加-->
<div class="layui-row" id="add_form" style="display:none;" >
        <div class="layui-col-md6" align="center">
            <form class="layui-form layui-from-pane" action="" id="add_perm" style="margin-top:20px" lay-filter = "add_form" >

                <div class="layui-form-item">
                    <label class="layui-form-label">父节点</label>
                    <div class="layui-input-block">
                        <select name="parent_id" id="parent_id" lay-filter="parent_id">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-block">
                        <input type="text"  id = "title" name="title"  required  lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">权限类型</label>
                    <div class="layui-input-block" >
                        <input type="radio" name="type" value="1" title="菜单" checked="" lay-filter="add_type" >
                        <input type="radio"  name="type" value="2" title="权限"  lay-filter="add_type" >
                    </div>
                </div>

                <div id="add_meun">

                    <div class="layui-form-item">
                        <label class="layui-form-label">url地址</label>
                        <div class="layui-input-block">
                            <input type="text" id="href" name="href"  required   autocomplete="off" placeholder=" " class="layui-input">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单图标</label>
                        <div class="layui-input-block">
                            <input type="text" id="icon" name="icon"  required  autocomplete="off" placeholder=" " class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">排序号</label>
                        <div class="layui-input-block">
                            <input type="text" id="sort_number" name="sort_number"  required   autocomplete="off" placeholder=" " class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单是否展开</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" checked="" id="spread" name="spread" lay-skin="switch" lay-filter="add_switch_spread" lay-text="展开|关闭">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">是否可见</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" checked="" id="enable" name="enable" lay-skin="switch" lay-filter="add_switch_enable" lay-text="启用|禁用">
                        </div>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">请求方法</label>
                    <div class="layui-input-block">
                        <select name="href_method">
                            <option value="" >请选择</option>
                            <option value="GET">GET</option>
                            <option value="POST" >POST</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" id="add_code">
                    <label class="layui-form-label">权限代码</label>
                    <div class="layui-input-block">
                        <input type="text" id="code" name="code"  required   autocomplete="off" placeholder=" " class="layui-input">
                    </div>
                </div>







                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="add_submitTable">添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>

                </div>

            </form>
        </div>

</div>
<!--// 详情-->
<div class="layui-col-md6" align="center" id="detail_form" style="display:none;">


</div>

<!--// 编辑-->
<div class="layui-row" id="edit_form" style="display:none;" >
    <div class="layui-col-md6" align="center">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px" lay-filter = "dataForm" >


            <div class="layui-form-item" style="display:none;">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <div class="layui-input-block">
                        <input type="hidden" name="permission_id"  autocomplete="off" placeholder="" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="text"    name="title"  required  lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">权限类型</label>
                <div class="layui-input-block" >
                    <input type="radio" name="type" value="2" title="权限" checked="" lay-filter="add_type" >
                    <input type="radio" name="type" value="1" title="菜单" lay-filter="add_type" >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">父节点</label>
                <div class="layui-input-block">
                    <select name="parent_id" id="edit_parent_id" lay-filter="href_method">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="text"   name="sort_number"  required   autocomplete="off" placeholder=" " class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text"   name="icon"  required  autocomplete="off" placeholder=" " class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">请求方法</label>
                <div class="layui-input-block">
                    <select name="href_method" id="href_method" lay-filter="href_method">
                        <option value="GET">GET</option>
                        <option value="POST" >POST</option>
                        <option value="PUT">PUT</option>
                        <option value="DELETE">DELETE</option>
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">url地址</label>
                <div class="layui-input-block">
                    <input type="text"   name="href"  required   autocomplete="off" placeholder=" " class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权限代码</label>
                <div class="layui-input-block">
                    <input type="text"   name="code"  required   autocomplete="off" placeholder=" " class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单是否展开</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked=""   name="spread" lay-skin="switch" lay-filter="add_switch_spread" lay-text="展开|关闭">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否可见</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked=""   name="enable" lay-skin="switch" lay-filter="add_switch_enable" lay-text="启用|禁用">
                </div>
            </div>




            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="submitTable">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>

            </div>

        </form>
    </div>
</div>



</body>
</html>
